{% extends 'department/base.html' %}
{% block title %} 部门信息列表 {% endblock %}
{% block content %}
    <div class="container">
        <br/><br/><br/>
        <div class="input-group">
            <label><input id="name" name="name" type="text" class="form-control"
                          placeholder="请输入部门名称" value="{{ name }}"/></label>
            <span class="input-group-btn">
          <a id="search" class="btn btn-primary btn-search"
             href="#" onclick="queryItem()">搜索</a>
          <a class="btn btn-primary btn-search" href="{% url 'department:create' %}">新增部门</a>
       </span>
        </div>
        <table class="table table-bordered table-striped text-center">
            <tr>
                <td>部门名称</td>
                <td>负责人</td>
                <td>手机号</td>
                <td>所属区域</td>
                <td>创建日期</td>
                <td>操作</td>
            </tr>
            {% for department in page_obj %}
                <tr>
                    <td><a href="{% url 'department:detail' department.id %}">
                        {{ department.name }}</a></td>
                    <td>{{ department.leader }}</td>
                    <td>{{ department.phone }}</td>
                    <td>{{ department.region }}</td>
                    <td>{{ department.createDate }}</td>
                    <td><a class="btn-sm btn-secondary btn-search"
                           href="{% url 'department:update' department.id %}">编辑</a>
                        <a class="btn-sm btn-danger btn-search btn-left"
                           href="#" onclick="deleteItem('{% url 'department:delete' department.id %}')">删除</a>
                </tr>
            {% endfor %}
        </table>

        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center pagination-sm">
                {% if page_obj.has_previous %}
                    {% if not search %}
                        <li class="page-item">
                            <a class="page-link"
                               href="{% url 'department:index' %}?page={{ page_obj.previous_page_number }}&name={{ name }}"
                               tabindex="-1">上一页</a>
                        </li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link"
                               href="{% url 'department:index' %}?{{ search }}&page={{ page_obj.previous_page_number }}&name={{ name }}" tabindex="-1">上一页</a>
                        </li>
                    {% endif %}
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1">上一页</a>
                    </li>
                {% endif %}
                {% for object in page_obj.paginator.page_range %}
                    <li class="page-item"><a class="page-link"
                                             href="{% url 'department:index' %}?page={{ forloop.counter }}&name={{ name }}">{{ forloop.counter }}</a>
                    </li>
                {% endfor %}
                {% if page_obj.has_next %}
                    {% if not search %}
                        <li class="page-item">
                            <a class="page-link"
                               href="{% url 'department:index' %}?page={{ page_obj.next_page_number }}&name={{ name }}">下一页</a>
                        </li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link"
                               href="{% url 'department:index' %}?{{ search }}&page={{ page_obj.next_page_number }}下一页</a>
                        </li>
                    {% endif %}
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">删除确认</h4>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    部门信息一旦删除，便不可恢复，你确认要删除?
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                            data-dismiss="modal">取消
                    </button>
                    <a id="del_data" class="btn btn-danger btn-search btn-left"
                       href="#">确定</a>
                </div>
            </div>
        </div>
    </div>
    <script>
        function queryItem() {
            $("#search").attr("href", "?name=" + $('#name').val());
        }

        function deleteItem(value) {
            $("#del_data").attr("href", value);
            $('#myModal').modal('show');
        }
    </script>
{% endblock %}